<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>
<body>
   <button>淡入效果</button>
   <button>淡出效果</button>
   <button>淡入淡出切换</button>
   <button>修改透明度</button>
   <div></div>
   <script>
       $(function () {
           $("button").eq(0).click(function () {
               //淡入 fadeIn()
               $("div").fadeIn();
           });
           $("button").eq(1).click(function () {
               //淡出 fadeOut()
               $("div").fadeOut();
           })
           $("button").eq(2).click(function () {
               //淡入淡出的切换 fadeToggle()
               $("div").fadeToggle();
           })
           $("button").eq(3).click(function () {
               //修改透明度 fadeTo()---必须传两个参数：速度，透明度
               $("div").fadeTo(100,0.5);
           })
       })
   </script>
</body>
</html>